<script lang="ts" setup>
import { reactive, toRefs, watch } from 'vue'

const emit = defineEmits(['update:modelValue', 'change', 'search', 'enter', 'blur'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  normal: {
    type: Boolean,
    default: true
  },
  icon: {
    type: Boolean,
    default: true
  }
})
const { modelValue } = toRefs(props)
const state = reactive({
  inputValue: modelValue?.value || ''
})

const changeHandler = (e: any) => {
  emit('update:modelValue', e)
}
const changeHandler2 = (e: any) => {
  emit('change', e)
}
const enterHandler = (e: any) => {
  emit('enter', e)
  emit('search', state.inputValue)
}
const blurHandler = (e: any) => {
  emit('blur', e)
  emit('search', state.inputValue)
}

watch(modelValue, (val: any) => {
  state.inputValue = val || ''
})
</script>

<template>
  <el-input ref="inputRef"
            v-model="state.inputValue"
            :placeholder="placeholder"
            style="width:100%;"
            clearable
            @update:model-value="changeHandler"
            @change="changeHandler2"
            @blur="blurHandler"
            @keydown.enter="enterHandler">
    <template #prefix>
      <slot v-if="icon" name="prefix">
        <div class="search-icon">
          <v-icon icon="sousuo" />
        </div>
      </slot>
    </template>
  </el-input>
</template>

<style scoped lang="scss">
.search-icon {
  flex: none;
  font-size: 16px;
  color: var(--w-ico);
  box-sizing: border-box;
}

</style>
